<template>
    <div class="app">
        <Header/>

        <div class="app-main">
            <div class="center">
                <div class="hd_survey_title">
                     <div class="wTone_one" style="padding: 0px;">
                         <table class="app-table">
                             <tr>
                                 <td style="width:5%">真实姓名：</td>
                                 <td style="width:45%">{{surveyDetail.rqstperson}}</td>
                                 <td style="width:5%">手机号码：</td>
                                 <td style="width:45%">{{surveyDetail.phonenum | deseHandler(4,4,"*")}}</td>
                             </tr>
                             <tr>
                                 <td>身份证号：</td>
                                 <td >{{surveyDetail.cardnum | deseHandler(4,4,"*") }}</td>
                                 <td>电子邮箱：</td>
                                 <td >{{surveyDetail.rqstemail | deseHandler(4,4,"*") }}</td>
                             </tr>
                             <tr>
                                 <td>留言类型：</td>
                                 <td >{{surveyDetail.rqstperson}}</td>
                                 <td>留言时间：</td>
                                 <td >{{surveyDetail.rqsttime}}</td>
                             </tr>
                             <tr>
                                 <td>留言主题：</td>
                                 <td colspan="3" >{{surveyDetail.rqsttitle}}</td>
                             </tr>
                             <tr>
                                 <td>留言内容：</td>
                                 <td colspan="3" >{{surveyDetail.rqstcontent}}</td>
                             </tr>

                             <tr>
                                 <td>答复部门：</td>
                                 <td>{{surveyDetail.answerou}}</td>
                                 <td>答复时间：</td>
                                 <td>{{surveyDetail.answertime}}</td>
                             </tr>

                             <tr>
                                 <td>答复内容：</td>
                                 <td colspan="3" style="min">{{surveyDetail.answercontent}}</td>
                             </tr>
                         </table>
                                <!--
                                <ul class="wtonelist">
                                   
                                    
                                    <li class="xjzt">
                                        <div class="wTone_name">建议类型：<span class="errorClass"></span>{{surveyDetail.adviseType}}</div>
                                    </li>
                                    <li class="xjzt">
                                        <div class="wTone_name">联系地址：<span class="errorClass"></span>{{surveyDetail.address}}</div>
                                    </li>
                                    <li class="xjzt">
                                        
                                    </li>
                                    <li class="xjzt">
                                        <div class="wTone_name">建议单位：<span class="errorClass"></span>{{surveyDetail.complaintDept}}</div>
                                    </li>

                                    <li class="xjzt">
                                        <div class="wTone_name"> 公开时间：<span class="errorClass"></span>{{surveyDetail.publishtime}}</div>
                                    </li>    
                                </ul>
                                -->
                            </div>
                </div>
            </div>
        </div>
        <div class="foot-wrap">
            <iframe
                id="data_detail"
                height='218'
                src="http://www.sc.gov.cn/10462/c106307/foot_newer_1200.shtml"
                width="100%" frameborder="0"
                @load="ch"
            ></iframe>
        </div>

    </div>
</template>

<script>
import Header from "@/components/Header";
import { getMailList } from '@/api';
export default {
    
  name: "SurveyResult",
  components: {
     Header,
  },
  data() {
    return {
      surveyId: "",
      surveyDetail: {
                    rqsttime: "",                   //咨询时间
                    rqstperson: "",                 //姓名（建议人、投诉人、真实姓名）
                    answertime: "",                 //答复时间
                    rqstcontent: "",                //诉求内容
                    publishtime: "",                //公开时间
                    rqsttitle: "",                  //标题
                    answercontent: "",              //答复内容
                    answerou: "",                   //答复部门
                    rqstemail: "",                  //邮箱
                    phonenum: "",                   //手机号码
                    cardnum: "",                    //身份证号码
                    address: "",                    //地址
                    complaintDept: "",              //投诉部门
                    adviseType: "",                 //建议类型
                    questType: ""                   //问题类型
      },
    };
  },
  computed:{
    getUserIdOrName(){
      return this.$store.state.user;
    }
  },
  mounted(){
    this.surveyId = this.$route.query.id;
    this.getDetail();
  },
  methods:{

       //获取在线留言详情数据
        getDetail() {
                let url = '/sys/sysMember/getCaseInfoDeatilByPersonal';
                let params = {
                    caseguid: this.surveyId
                };
                getMailList(url, params).then(res => {
                    if (res.data.Status == 'true') {
                        
                        this.surveyDetail = res.data.data;
                    }
                })
        }
  },
  filters: {
    deseHandler: function (str, frontLen, endLen, wildcard) {
        var lenin = frontLen+ endLen;
      if (!str) {
        return "--";
      } else if (str.length < lenin) {
        return str;
      } else {
        var len = str.length - frontLen - endLen;
        var xing = "";
        for (var i = 0; i < len; i++) {
          xing += wildcard;
        }
        return (
          str.substring(0, frontLen) + xing + str.substring(str.length - endLen)
        );
      }
    },
  }
};
</script>

<style scoped>
    .app-main {
        overflow: hidden;
    }

    .app-main .center {
        width: 1200px;
        margin: 20px auto;
        background-color: white;
        padding: 0 20px 25px;
    }

    .hd_survey_title {
        border-bottom: 2px solid #ccc;
        padding-bottom: 20px;
    }

    .hd_survey_title h1 {
        font-size: 36px;
        font-weight: 500;
        padding-top: 30px;
        color: #4c4c4c;
        line-height: 50px;
        text-align: center;
        word-wrap: break-word;
        margin: 20px 0;
    }

    .hd_survey_time {
        margin-top: 12px;
        color: #4c4c4c;
        font-size: 16px;
        line-height: 23px;
        text-align: center;
    }

    .hd_survey_time span {
        margin-right: 20px;
    }

    .item_line{
        line-height: 2;
    }
    .my_line {
        display: inline-block;
        /*vertical-align: middle;*/
    }
    .left_div{
        width: 40%;
    }
    .right_div{
        width: 60%;
    }
    .my_progress{
        width: 300px;
    }

</style>
